<template>
	<div class="register">
		<!-- 头部 -->
		<MyHead></MyHead>

		<!-- 输入框 -->
		<MyInput 
		v-model="user.username" 
		placeholder="手机号码" 
		type="text" 
		:rules="/^1\d{10}$|^10{2}\d{2,3}$/" 
		msg="号码格式错误!"		
		>		
		</MyInput>

		<MyInput 
		v-model="user.nickname" 
		placeholder="昵称" 
		type="text" 
		:rules="/^.{2,10}$/" 
		msg="昵称格式错误!"
		>
		</MyInput>

		<MyInput 
		v-model="user.password" 
		placeholder="密码" 
		type="password" 
		:rules="/^.{6,16}$/" 
		msg="密码格式错误!"
		>
		</MyInput>


		<!-- 登录提示 -->
		<div class="login_tips">
			已有账号?<router-link replace to="/login">去登录</router-link>
		</div>

		<!-- 按钮 -->
		<MyButton type="primary" @click="RegisterFn">注册</MyButton>
	</div>
</template>

<script>
	import MyHead from '../components/MyHead.vue'
	import MyInput from '../components/MyInput.vue'
	import MyButton from '../components/MyButton.vue'
	import {
		userRegisterApi
	} from '../apis/user.js'
	export default {
		data() {
			return {
				user: {
					username: '',
					password: '',
					nickname: ''

				}
			}
		},
		components: {
			MyHead,
			MyInput,
			MyButton
		},
		methods: {
			RegisterFn() {
				const nameReg = /^1\d{10}$|^10{2}\d{2,3}$/;
				const pwReg = /^.{6,16}$/;
				const nickNReg = /^.{2,10}$/;
				if (nameReg.test(this.user.username) && pwReg.test(this.user.password)) {

					if (nickNReg.test(this.user.nickname)) {

						userRegisterApi({
								username: this.user.username,
								password: this.user.password,
								nickname: this.user.nickname
							})
							.then(res => {
								const { message } = res.data;
								//console.log(res);
								if(message === "注册成功"){
									
									this.$toast.success("注册成功，欢迎使用")
									//通过编程式导航跳转
									this.$router.push({path: '/login'});
								
								}else{
									
									this.$toast.fail(message)
									
								}
							})

					} else {
						this.$toast("昵称不规范！");
					}

				} else {
					this.$toast("用户名或密码错误！");

				}



			},
		}
	}
</script>

<style lang="less" scoped>
	.login_tips {
		text-align: right;
		padding-right: 30px;
	}
</style>
